// components/fab.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    btns: {
      type: Array,
      value: [{
        iconPath: 'https://oa-meilai.obs.cn-jssz1.ctyun.cn/20221102145517219958.png',
        text: '刷新',
        autoClose: true
      }]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    showBtns: false,
    animationMainBtn: {},
    animationBtns: {}
  },

  lifetimes: {
    attached() {
      this.animation = wx.createAnimation();
      this.animationBtns = wx.createAnimation();
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeShow() {
      const _this = this
      _this.setData({
        showBtns: !_this.data.showBtns
      }, function () {
        //console.log(_this.data.showBtns)
        if (_this.data.showBtns) {
          _this.rotate45();
          _this.btnsShow();
        } else {
          _this.rotate0();
          _this.btnsHide();
        }
      })
    },

    btnsHide() {
      const _this = this;
      _this.animationBtns.opacity(0.3).step({
        duration: 100
      });
      _this.animationBtns.opacity(0).height(0).step({
        duration: 100
      });
      _this.setData({
        animationBtns: _this.animationBtns.export()
      })
    },

    btnsShow() {
      const _this = this;
      const height = ((_this.properties.btns || []).length * 106 + 32);
      _this.animationBtns.height(height + 'rpx').opacity(0.3).step({
        duration: 200,
        timingFunction: 'ease-out'
      });
      _this.animationBtns.opacity(1).step({
        duration: 100
      });
      _this.setData({
        animationBtns: _this.animationBtns.export()
      })
    },

    rotate45() {
      const _this = this;
      _this.animation.rotate(45).step({
        duration: 200
      });
      _this.setData({
        animationMainBtn: _this.animation.export()
      })
    },
    rotate0() {
      const _this = this;
      _this.animation.rotate(0).step({
        duration: 200
      });
      _this.setData({
        animationMainBtn: _this.animation.export()
      })
    },

    triggerOne({
      currentTarget: {
        dataset: {
          idx
        }
      }
    }) {
      const _this = this;
      const curBtn = _this.properties.btns[idx];
      _this.triggerEvent('trigger', curBtn.text);
      if (curBtn.autoClose == undefined || curBtn.autoClose) {
        _this.setData({
          showBtns: false
        })
        _this.rotate0();
        _this.btnsHide();
      }
    },
  }
})